<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>inputEx - How to use the Dialog widget</title>

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

<!-- YUI loader-->	
<script src="../lib/yui/yuiloader/yuiloader-min.js"></script> 

<!-- inputEx loader -->
<script src="../js/inputex-loader.js"></script>

</head>
<body class="yui-skin-sam">
	
	<h1>inputEx - Dialog Widget Usage</h1>
	
	<!-- Example 1 -->
	<div class='exampleDiv'>

		<h2>Basic Dialog creation</h2>

		<p>Use the following code to create a basic inputEx Dialog. Note the scope hack with "Example1" to define the buttons callbacks.</p>

		<div class='demoContainer' id='container1'>
			<button onclick="Example1.myPanel.show();">Show Panel</button>
		</div>

		<div class='codeContainer'>
			<textarea name="code" class="JScript">
				
				// HTML code
				<button onclick="Example1.myPanel.show();">Show Panel</button>
				
				// Javascript code
				Example1 = {};
				var formConfig =		{
				         type: 'form',
			            fields: [ 
											{type: 'select', label: 'Title', name: 'title', choices: ['Mr', 'Mrs', 'Ms'] },
											{label: 'Firstname', name: 'firstname', required: true, value:'Jacques' },
											{label: 'Lastname', name: 'lastname', value:'Dupont' } },
											{type:'email', label: 'Email', name: 'email'},
											{type:'url', label: 'Website',name:'website'}
										],
			            buttons: [
			               {type: 'submit', value: 'Send', onClick: function() { 
													alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue())); 
													return false; // prevent form submit
										 }},
			               {type: 'link', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } }
			            ]
				      }
				Example1.myPanel = new inputEx.widget.Dialog({
					inputExDef: formConfig,
					title: 'Here the title of your dialog'
				});
			</textarea>
		</div>

	</div>

	
	
	<!-- Example 2 -->
	<div class='exampleDiv'>

		<h2>Change dialog properties</h2>

		<p>Access the YUI panel properties with the "panelConfig" object. Example with a modal dialog. (See <a href="http://developer.yahoo.com/yui/container/panel/">the YUI panel documentation</a> for more informations.)</p>

		<div class='demoContainer' id='container2'>
			<button onclick="Example2.myPanel.show();">Show Panel</button>
		</div>

		<div class='codeContainer'>
			<textarea name="code" class="JScript">
				Example2 = {};
				Example2.myPanel = new inputEx.widget.Dialog({
						inputExDef: {
						         type: 'form',
					            fields: [ 
													{type:'string', label: 'Name', name: 'firstname', required: true },
													{type:'email', label: 'Email', name: 'email', description: 'Won\'t be displayed...'},
													{type:'url', label: 'Website',name:'website', typeInvite: '(optional)'},
													{type:'text', label: 'Your comment',name:'comments'}
												],
					            buttons: [
					               {type: 'submit', value: 'Send', onClick: function() { 
															alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue()));
															return false;
												 }},
					               {type: 'link', value: 'Cancel', onClick: function() { Example2.myPanel.hide(); } }
					            ]
						      },
						title: 'Please post a comment !',
						panelConfig: {
							constraintoviewport: true, 
							underlay:"shadow", 
							close:true, 
							fixedcenter: true,
							visible:false, 
							draggable:true,
							modal: true
						}
				});
			</textarea>
		</div>

	</div>

	
	
<script>


/**
 * The function to call when all script/css resources have been loaded
 */
function init() {
	
	// Required for the UrlField
	inputEx.spacerUrl = "../images/space.gif";
		
	// Example 1	
	Example1 = {};
	var formConfig =		{
	         type: 'form',
            fields: [ 
								{type: 'select', label: 'Title', name: 'title', choices: ['Mr', 'Mrs', 'Ms'] },
								{label: 'Firstname', name: 'firstname', required: true, value:'Jacques' },
								{label: 'Lastname', name: 'lastname', value:'Dupont' },
								{type:'email', label: 'Email', name: 'email'},
								{type:'url', label: 'Website',name:'website'}
							],
            buttons: [
               {type: 'submit', value: 'Send', onClick: function() { 
										alert(YAHOO.lang.JSON.stringify(Example1.myPanel.getForm().getValue()));
										return false; // prevent form submit
							 }},
               {type: 'link', value: 'Cancel', onClick: function() { Example1.myPanel.hide(); } }
            ]
	      };
	Example1.myPanel = new inputEx.widget.Dialog({
		inputExDef: formConfig,
		title: 'Here the title of your dialog'
	});
	
	// Example 2
	Example2 = {};
	Example2.myPanel = new inputEx.widget.Dialog({
			inputExDef: {
			         type: 'form',
		            fields: [ 
										{type:'string', label: 'Name', name: 'firstname', required: true },
										{type:'email', label: 'Email', name: 'email', description: 'Won\'t be displayed...'},
										{type:'url', label: 'Website',name:'website', typeInvite: '(optional)'},
										{type:'text', label: 'Your comment',name:'comments'}
									],
		            buttons: [
		               {type: 'submit', value: 'Send', onClick: function() { 
												alert(YAHOO.lang.JSON.stringify(Example2.myPanel.getForm().getValue())); 
												return false; // prevent form submit
									 }},
		               {type: 'link', value: 'Cancel', onClick: function() { Example2.myPanel.hide(); } }
		            ]
			      },
			title: 'Please post a comment !',
			panelConfig: {
				constraintoviewport: true, 
				underlay:"shadow", 
				close:true, 
				fixedcenter: true,
				visible:false, 
				draggable:true,
				modal: true
			}
	});
	
};


var loader = new YAHOO.util.YUILoader({
    require: ["inputex-emailfield", "inputex-urlfield", "inputex-selectfield", "inputex-form", "inputex-dialog", "inputex-textarea", "json"],
    loadOptional: true,
    onSuccess: init
});

/**
 * Important: this functions declares all inputEx Modules to YUI
 */
YAHOO.addInputExModules(loader, '../');
loader.insert();

</script>


<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code');
</script>


</body>
</html>
